<template>
	<div
		class="MoveLessonTo"
		style="
			display: flex;
			flex-direction: column;
			height: 100vh;
			box-sizing: border-box;
		"
	>
		<!-- 顶部 -->
		<div class="MoveLessonTo-top">
			<nav-bar
				:title="TopDetail.name"
				left-text=""
				left-arrow
				@click-left="onClickLeft"
			>
				<template #right class="share-right">
					<cell @click="showShare = true">
						<i class="fa fa-share-alt" aria-hidden="true"></i>
					</cell>
					<share-sheet
						v-model:show="showShare"
						title="分享到"
						:options="options"
						@select="onSelect"
					/>
				</template>
			</nav-bar>
		</div>
		<!-- 主要内容区域 -->
		<div class="MoveLessonTo-main" style="overflow: auto; flex: 1">
			<!-- 视频和描述 -->
			<div
				style="
					box-sizing: border-box;
					background-color: white;
					margin-bottom: .5rem;
				"
			>
				<div style="height: 30vh;">
<!-- 					<img :src="TopDetail.picture" alt="" style="width: 100%" /> -->
<video  :src="TopDetail.video"  controls="controls" style="width: 100%; object-fit: fill" ></video>
				</div>
				<div style="padding: 1rem 1.5rem">
					<h3>{{ TopDetail.name }}</h3>
					<div
						style="
							height: 7vh;
							overflow: hidden;
							text-overflow: ellipsis;
							display: -webkit-box;
							-webkit-line-clamp: 3;
							-webkit-box-orient: vertical;
							font-size: 0.75rem;
							margin-top: .5rem;
						"
					>
						{{TopDetail.Introduction}}
					</div>
					<div
						style="
							margin-top: 0.7rem;
							display: flex;
							justify-content: space-between;
						"
					>
						<span
							><i style="color: red"
								>￥<i>{{ TopDetail.price }}</i></i
							></span
						>
						<div>
							<span style="color: #1989fa;font-size: .75rem;font-weight: bolder;">7915</span
							><span style="color: #999;font-size: .75rem;">人已购买</span>
						</div>
					</div>
					<div class="MoveLessonTo-btn">
						<Button>初三</Button><Button>数学</Button
						><Button>冲刺</Button><Button>有效期：一年</Button>
					</div>
				</div>
			</div>

			<!-- 粘性布局导航 -->
			<div class="MoveLessonTo-Sticky">
				<tabs v-model:active="active" scrollspy sticky :offset-top="46">
					<!-- 课程介绍 -->
					<tab :title="'课程介绍 '">
						<div style="height: 100%;width: 100vw;">
							<img src="./img/课程介绍.png" alt="图片" style="width: 100%;"/>
						</div>
					</tab>

					<!-- 课程大纲 -->
					<tab :title="'课程大纲 '">
						<div
							style="
								display: flex;
								flex-direction: row;
								flex-wrap: wrap;
								justify-content: space-evenly;
								box-sizing: border-box;
								padding: 2rem 0.5rem;
								width: 100vw;
								background-color: white;
							"
						>
							<div
								:to="{ name: 'Home-Video' }"
								v-for="i in VideoDetail"
								@click="VDetail(i)"
							>
								<div
									style="
										width: 42vw;
										height: 25vh;
										margin-bottom: 1rem;
										color: #333;
										box-sizing: border-box;
									"
								>
									<img
										:src="i.picture"
										alt="图片"
										style="
											height: 60%;
											display: block;
											width: 100%;
											border-radius: .3rem;
											margin-bottom: .3rem;
										"
									/>
									<h5>{{ i.name }}</h5>
									<div
										style="
											color: #999;
											font-size: 0.7rem;
											line-height: 1.5rem;
										"
									>
										<span style="display: inline-block;margin-right: .5rem;">视频：5</span
										><span>习题：10685</span>
									</div>
								</div>
							</div>
							<div style="width: 42vw; height: 25vh"></div>
						</div>
					</tab>
					<!-- 购课须知 -->
					<tab :title="'购课须知 '">
						<div style="height: 100%;width: 100vw;">
							<img src="./img/购课须知.png" alt="图片" style="width: 100%;"/>
						</div>
					</tab>
					<!-- 用户评价 -->
					<tab :title="'用户评价 '">
						<div>
							<img src="./img/用户评价.png" alt="图片" style="width: 100%;"/>
						</div>
					</tab>
				</tabs>
			</div>
		</div>

		<!-- 底部 -->
		<div
			class="MoveLessonTo-bottom"
			style="
				width: 100vw;
				height: 3.125rem;
				display: flex;
				justify-content: center;
				background-color: white;
			"
		>
			<div>
				<cell is-link @click="showPopup">
					<icon
						name="service-o"
						style="font-weight: bolder; font-size: 1.7em"
					/>
				</cell>
				<popup
					class="Nav-Icon"
					v-model:show="show"
					style="
						display: flex;
						flex-direction: column;
						justify-content: space-evenly;
						height: 30vh;
						width: 90vw;
					"
				>
					<nav-bar title="资助助教" left-text="">
						<template #right>
							<icon name="cross" size="18" />
						</template>
					</nav-bar>
					<div
						style="
							display: flex;
							font-size: 0.75rem;
							justify-content: space-evenly;
						"
					>
						<div
							style="
								display: flex;
								flex-direction: column;
								align-items: center;
							"
						>
							<span
								style="
									width: 2.5rem;
									height: 2.5rem;
									background-color: #0bc15f;
									text-align: center;
									line-height: 2.5rem;
									font-size: 2rem;
									border-radius: 50%;
									color: white;
								"
								><icon name="wechat" /></span
							><span
								style="line-height: 2.5rem; text-align: center"
								>微信咨询</span
							><span style="text-align: center; color: #999"
								>微信号：CJKTXZS</span
							><span
								style="
									color: blue;
									text-decoration: underline;
									line-height: 2.5rem;
								"
								>点击复制</span
							>
						</div>
						<div
							style="
								display: flex;
								flex-direction: column;
								align-items: center;
							"
						>
							<span
								style="
									width: 2.5rem;
									height: 2.5rem;
									background-color: #38b9fa;
									text-align: center;
									line-height: 2.5rem;
									font-size: 2rem;
									border-radius: 50%;
									color: white;
								"
								><icon name="qq" /></span
							><span
								style="line-height: 2.5rem; text-align: center"
								>QQ咨询</span
							><span style="text-align: center"
								><router-link
									:to="{ name: '' }"
									style="
										color: blue;
										text-decoration: underline;
									"
									>点击跳转</router-link
								></span
							>
						</div>
					</div>
				</popup>
			</div>

			<div
				style="
					width: 70vw;
					background-color: red;
					border-radius: 1.5625rem;
					text-align: center;
					line-height: 2.5rem;
					height: 2.5rem;
					margin: auto 0;
					color: aliceblue;
				"
			>
				<div
					:to="{ name: 'Home-Orders' }"
					@click="OrdersHandle(TopDetail.id)"
				>
					￥&nbsp;<span>{{ TopDetail.price }}</span
					>&nbsp;购买
				</div>
			</div>
		</div>
	</div>
</template>
<script setup>
import {
	NavBar,
	ShareSheet,
	Toast,
	Cell,
	Popup,
	Icon,
	Sticky,
	Tab,
	Tabs,
	Button,
} from "vant";
import "font-awesome/css/font-awesome.min.css";
import { ref } from "vue";
import { ComboTreeDetailAPI } from "../API/wang";
import { useRoute, useRouter } from "vue-router";
const route = useRoute(); //获取路由中的参数
const router = useRouter();
/* 顶部数据 */
const TopDetail = ref([]); //数据
/* 视频详情页数据 */
const VideoDetail = ref([]); //数据
const loadData = async () => {
	const data = await ComboTreeDetailAPI(route.query.id);
	console.log(data.data);

	TopDetail.value = data.data[route.query.id - 1];
	console.log(TopDetail.value);

	VideoDetail.value = data.data[route.query.id - 1].children;
	console.log(VideoDetail.value);
};
//返回上一级
const onClickLeft = () => router.go(-1);
//分享
const showShare = ref(false);
const options = [
	{ name: "微信", icon: "wechat" },
	{ name: "微博", icon: "weibo" },
	{ name: "微博", icon: "weibo" },
	{ name: "QQ", icon: "qq" },
];

const onSelect = (option) => {
	Toast(option.name);
	showShare.value = false;
};
//底部弹出层
const show = ref(false);
const showPopup = () => {
	show.value = true;
};
loadData();
const id = route.query.id;
/* 跳转视频详情 */
const VDetail = (i) => {
	router.push({
		name: "Home-Training",
		query: {
			idTwo: i.id,
			id: id,
		},
	});
};
/* 跳转订单页 */
const OrdersHandle = (id) => {
	router.push({
		name: "Home-Orders",
		query: {
			id,
		},
	});
};
</script>
<style>
#app {
	padding-bottom: 0;
}
/* 分享 */
.MoveLessonTo{
	background-color: #e7e7ec;
}
.MoveLessonTo-top .van-icon-arrow-left:before {
	color: #333;
}
.MoveLessonTo-top .van-nav-bar .van-icon {
	color: aliceblue;
}
.MoveLessonTo-top .van-share-sheet__options {
	justify-content: space-around;
}
/* 底部 */
.MoveLessonTo-bottom .van-icon-arrow:before {
	content: "";
}
i {
	font-style: normal;
}
a {
	color: white;
}
/* 按钮 */
.MoveLessonTo-btn button {
	border-color: #1989fa;
	border-radius: 0.5rem;
	font-size: 0.75rem;
	margin-right: 0.5rem;
}
.MoveLessonTo .van-button--normal{
	padding: 0 .3rem;
}
.MoveLessonTo .van-button{
	background-color: #1989fa1f;
	height: 1rem;
}
/* 导航 */
.MoveLessonTo .van-tabs__line {
	background-color: #1989fa;
}
.MoveLessonTo .van-tab--active {
	color: #1989fa;
}
.MoveLessonTo .Nav-Icon .van-nav-bar .van-icon {
	color: #999 !important;
}
.MoveLessonTo .van-sticky--fixed {
	z-index: 0;
}
</style>
